<script setup>
  import { Search } from '@element-plus/icons-vue';
  import close from '@/assets/images/login-close.png';
  import { getMemberTagPage,setMemberTag } from '@/api/Member/index'

  const props = defineProps({
    show: {
      type: Boolean,
      default: false
    },
    item:{
      type: Object,
      default: () => {}
    }
  })
  const loading = ref(false)

  const treeRef = ref(null)
  const filterText = ref('')
  const filterNode = (value, data) => {
    if (!value) return true
    return data.label.includes(value)
  }
  watch(filterText, (val) => {
    treeRef.value && treeRef.value.filter(val)
  })
  const checkChange =(data,treeData)=>{
    console.log('treeData', treeData)
    selectedLabels.value = treeData.checkedNodes.filter(item=>{
      return item.parentId !== '0'
    })
  }
  const deleteTag = (data)=>{
    selectedLabels.value = selectedLabels.value.filter(item=>{
      return item.id !== data.id
    })
    treeRef.value && treeRef.value.setChecked(data,false)
  }
  const clearTag = ()=>{
    selectedLabels.value = []
    treeRef.value && treeRef.value.setCheckedNodes([])
  }

  const defaultProps = {
    children: 'secondLabelList',
    label: 'labelName',
  }
  const labels = ref([])
  // 获取标签列表
  const _getTagList = async ()=>{
    const res = await getMemberTagPage({
      page:{
        size:10000,
        current:1
      }
    })
    labels.value = res.records
    if(props.item.tagIds.length){
      treeRef.value && treeRef.value.setCheckedKeys(props.item.tagIds)
      nextTick(()=>{
        selectedLabels.value = treeRef.value.getCheckedNodes().filter(item=>item.parentId!=='0')
      })
    }else{
      treeRef.value && treeRef.value.setCheckedKeys([])
    }
  }
  watch(()=>props.show,(val)=>{
    if(val){
      _getTagList()
    }
  })

  const selectedLabels = ref([])
  const emits = defineEmits(['update:show','refresh'])
  const handleClose = () => {
    selectedLabels.value = []
    emits('update:show', false)
  }
  const confirm = async ()=>{
    try{
      loading.value = true
      await setMemberTag({
        userId:props.item.id,
        labelIdList:selectedLabels.value.map(item=>item.id)
      })
      emits('refresh')
      handleClose()
      ElMessage.success('编辑成功')
    }finally{
      loading.value = false
    }
  }
</script>

<template>
  <el-dialog
    class="myDialog"
    :model-value="show"
    title="选择标签"
    width="560"
    :before-close="handleClose"
  >
    <div class="flex items-center">
      <div class="leftBox">
        <div class="myInput">
          <el-input :prefix-icon="Search" v-model="filterText" placeholder="搜索" />
        </div>
        <el-scrollbar>
          <div class="myTree">
            <el-tree
              ref="treeRef"
              :data="labels"
              show-checkbox
              @check="checkChange"
              node-key="id"
              :filter-node-method="filterNode"
              :props="defaultProps"
            />
          </div>
        </el-scrollbar>
      </div>
      <div class="rightBox">
        <el-scrollbar>
        <div class="rightBox-item rightBox-item-header">
          <span class="rightBox-item-headerLabel">已选择{{ selectedLabels.length }}</span>
          <span @click="clearTag" class="rightBox-item-clear">清空</span>
        </div>
        <div class="rightBox-item" v-for="item in selectedLabels" :key="item.id">
          <span class="rightBox-item-label">{{ item.labelName }}</span>
          <img @click="deleteTag(item)" class="rightBox-item-clearImg" :src="close" alt="">
        </div>
      </el-scrollbar>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button round @click="handleClose">取消</el-button>
        <el-button round type="primary" @click="confirm">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style>
.el-dialog__body{
  padding: 0 !important;
}
</style>
<style lang="less" scoped>
.leftBox{
  position: relative;
  padding: 16px 0 16px 16px;
  width: 280px;
  height: 360px;
  border: 1px solid #DDDDDD;
  border-left: none;
  overflow: hidden;
  .myInput{
    padding-right: 16px;
    margin-bottom: 12px;
  }
  .myTree{
    overflow: hidden;
    padding-right: 16px;
    padding-bottom: 32px;
  }
}
.rightBox{
  padding: 0 0 16px 16px;
  width: 279px;
  height: 376px;
  border: 1px solid #DDDDDD;
  border-left: none;
  border-right: none;
  .rightBox-item{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-right: 16px;
    font-size: 14px;
      font-weight: 400;
      line-height: 14px;
    .rightBox-item-headerLabel{
      color: #666666;
    }
    .rightBox-item-clear{
      color: #3480ff;
      cursor: pointer;
    }
    .rightBox-item-label{
      color: #000000;
    }
    .rightBox-item-clearImg{
      width: 14px;
      height: 14px;
      cursor: pointer;
    }
  }
  .rightBox-item-header{
    margin-bottom: 0;
    padding: 16px 16px 16px 0;
    background-color: #fff;
    position: sticky;
    top: 0;
  }
}
</style>